<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>命名路由</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
	<div id="app"></div>
    <script type="text/javascript">
    const Home = {
        template: '<div>This is Home</div>'
    }
    const Foo = {
        template: '<div>This is Foo</div>'
    }
    const Bar = {
        template: '<div>This is Bar {{ $route.params.id }}</div>'
    }
    const Goo = {
        template: '<div>This is goo</div>'
    }
    const router = new VueRouter({
        // mode: 'history',
        // base: __dirname,
        routes: [{
            path: '/',
            name: 'home',
            component: Home
        }, {
            path: '/foo',
            name: 'foo',
            component: Foo
        }, {
            path: '/bar/:id',
            name: 'bar',
            component: Bar
        }, {
            path: '/goo/:userId',
            name: 'goo',
            component: Goo
        }]
    })

    new Vue({
        router,
        template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home' }">home</router-link></li>
        <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
        <li onclick="routerGo()">编程跳转go</li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
    }).$mount('#app')

    // 编程式
    function routerGo() {
    	router.push({ name: 'goo', params: { userId: 123 }})
    }
    </script>
</body>

</html>
